<template>
  <div class="openinvoice">
    <v-header ref="header" title="发票信息" :handleClick="true" @back="handleNativeBack"></v-header>
    <scroll ref="scroll" style="overflow: hidden;height: 100%" :bounce="false"
            :style="{height: scrollHeight + 'px'}">
        <div>
            <div>
                <div class="invoiceType">
                    <p class="invoiceTypeHead">发票类型</p>
                    <checker v-model="invoice.invoiceType" type="radio" :radio-required="true" default-item-class="invoiceConentDefault" selected-item-class="invoiceConentSelect">
                      <checker-item :value="0">普通发票</checker-item>
                      <checker-item :value="1">电子普通发票</checker-item>
                    </checker>
                    <p class="invoiceExplain">电子发票和纸质发票同样具备法律效力，可支持报销入账</p>
                </div>

                <div class="invoiceHead">
                    <p class="invoiceTypeHead">发票抬头</p>
                    <checker
                    :radio-required="true"
                    v-model="invoice.invoiceRiseType" 
                    default-item-class="invoiceHeadDefault" 
                    selected-item-class="invoiceHeadSelect">
                      <checker-item :value="0">√</checker-item>  个人&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      <checker-item :value="1">√</checker-item>  单位
                    </checker>

                    <!-- 普通、单位 -->
                    <div v-show="invoice.invoiceType==0 && invoice.invoiceRiseType==1 || invoice.invoiceType==1 && invoice.invoiceRiseType==1">
                      <x-input class="invoicePersonal" v-model="invoice.companyName" :required='true'>
                        <p slot="label" style="margin-right: 20px">
                          <font color="red">*</font>公司名称
                         </p>
                      </x-input>
                      <x-input class="invoicePersonal" v-model="invoice.registrationNumber" :required='true'>
                          <p slot="label" style="margin-right: 20px">
                            <font color="red">*</font>税号
                          </p>
                      </x-input>
                    </div>
                </div>

                <!-- 电子发票、个人 -->
                <div class="invoiceTypeNetwork" v-show="invoice.invoiceType==1">
                    <p class="invoiceTypeHead">收票人信息</p>
                    <div>
                    <x-input class="invoicePersonal" v-model="invoice.accountPhone" :required='true' :max="13" is-type="china-mobile" keyboard="number">
                        <p slot="label" style="margin-right: 20px">
                            <font color="red">*</font>收票人手机号
                        </p>
                    </x-input>
                    <x-input class="invoicePersonal" v-model="invoice.accountEmail" is-type="email" :required='true'>
                        <p slot="label" style="margin-right: 20px">
                            <font color="red">*</font>收票人邮箱
                        </p>
                    </x-input>
                    </div>
                </div>

                <div class="invoiceConent">
                    <div class="invoicetext">
                      <p class="invoiceTypeHead">发票内容</p>
                      <span class="invoicetextCon">发票内容选项已根据税法调整，具体请以展示为准</span>
                    </div>
                    <checker :radio-required="true" v-model="invoice.invoiceContentType" default-item-class="invoiceConentDefault" selected-item-class="invoiceConentSelect">
                    <checker-item :value="0">商品明细</checker-item>
                    <checker-item :value="1">商品类别</checker-item>
                    </checker>
                    <p class="invoiceExplain" v-show="invoice.invoiceContentType==0">发票内容将显示详细名商品名称与价格信息</p>
                    <p class="invoiceExplain" v-show="invoice.invoiceContentType==1">发票内容将显示本单位所属类别（通讯器材及配件）及价格信息</p>
                </div>
                </div>
                <div class="buttonContent">
                    <div @click="popupToggle" class="btnWrapper">
                        <x-button :gradients="['#FF5E3A', '#FF9500']">确认</x-button>
                    </div>
                </div>
                <div style="height:30px; width: 100%">

                </div>
        </div>
    </scroll>
  </div>
</template>

<script type='text/ecmascript-6'>
import VHeader from '@/components/v-header/v-header'
import { Checker, CheckerItem, XInput, XButton } from 'vux'
import Scroll from '@/components/scroll/scroll'
import { mapGetters, mapMutations } from 'vuex'
import { handleBackMixin } from '@/assets/js/mixin'
export default {
  mixins: [handleBackMixin],
  data () {
    return {
      scrollHeight: 500,
      allPopupModels: []
    }
  },
  components: {
    VHeader,
    Checker,
    CheckerItem,
    XInput,
    XButton,
    Scroll
  },
  computed: {
    ...mapGetters([
      'invoice'
    ])
  },
  created () {
  },
  mounted () {
    this.scrollHeight = window.innerHeight - this.$refs.header.$el.offsetHeight
  },
  methods: {
    handleNativeBack () {
      // TODO 确认框
      const _self = this
      if (_self.invoice.companyName !== '' || _self.invoice.registrationNumber !== '' || _self.invoice.accountPhone !== '' || _self.invoice.accountEmail !== '') {
        _self.$vux.confirm.show({
          title: '温馨提示',
          content: '信息尚未编辑完成，是否退出',
          onConfirm () {
            _self.$router.replace({
              path: '/user/submitorder',
              query: {
                isSubmitInvoice: '0'
              }
            })
          }
        })
      } else {
        _self.$router.replace({
          path: '/user/submitorder',
          query: {
            isSubmitInvoice: '0'
          }
        })
      }
      return true
    },
    popupToggle () {
      // 作发票为空验证和格式验证
      let reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/
      let regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (this.invoice.invoiceType === 0 && this.invoice.invoiceRiseType === 1) {
        if (this.invoice.companyName === '') {
          this.$vux.toast.text('公司名称不能为空', 'middle')
          return
        } else if (this.invoice.registrationNumber === '') {
          this.$vux.toast.text('税号不能为空', 'middle')
          return
        }
      } else if (this.invoice.invoiceType === 1 && this.invoice.invoiceRiseType === 0) {
        if (this.invoice.accountPhone === '') {
          this.$vux.toast.text('收票人手机号不能为空', 'middle')
          return
        } else if (!reg.test(this.invoice.accountPhone)) {
          this.$vux.toast.text('收票人手机格式不正确', 'middle')
          return
        } else if (this.invoice.accountEmail === '') {
          this.$vux.toast.text('收票人邮箱不能为空', 'middle')
          return
        } else if (this.invoice.accountEmail !== '' && !regEmail.test(this.invoice.accountEmail)) {
          this.$vux.toast.text('收票人邮箱格式不正确', 'middle')
          return
        }
      } else if (this.invoice.invoiceType === 1 && this.invoice.invoiceRiseType === 1) {
        if (this.invoice.companyName === '') {
          this.$vux.toast.text('公司名称不能为空', 'middle')
          return
        } else if (this.invoice.registrationNumber === '') {
          this.$vux.toast.text('税号不能为空', 'middle')
          return
        } else if (this.invoice.accountPhone === '') {
          this.$vux.toast.text('收票人手机号不能为空', 'middle')
          return
        } else if (!reg.test(this.invoice.accountPhone)) {
          this.$vux.toast.text('收票人手机格式不正确', 'middle')
          return
        } else if (this.invoice.accountEmail === '') {
          this.$vux.toast.text('收票人邮箱不能为空', 'middle')
          return
        } else if (this.invoice.accountEmail !== '' && !regEmail.test(this.invoice.accountEmail)) {
          this.$vux.toast.text('收票人邮箱格式不正确', 'middle')
          return
        }
      }
      // 将invoice对象信息存入vux
      this.setInvoice(this.invoice)
      this.$router.replace({
        path: '/user/submitorder',
        query: {
          isSubmitInvoice: '1'
        }
      })
    },
    ...mapMutations({
      setInvoice: 'SET_INVOICE'
    })
  }
}
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
@import '~@/assets/css/variable.styl'
  .openinvoice{
    position fixed
    z-index 1000
    top 0
    left 0
    right 0
    bottom 0
    background $color-background
    .invoiceType{
      padding 15px 12px
      background #fff
      .invoiceConentDefault{
        border 1px solid #68727d
        padding 2px 10px
        border-radius 2px
        font-size $font-size-medium
      }
      .invoiceConentSelect{
        color #FF9100
        border 1px solid #FF9100
      }
      .invoiceExplain{
        font-size $font-size-desc
        color $color-text-2
        margin-top 10px
      }
      .invoiceTypeHead{
        margin-bottom 10px 
        font-size $font-size-title
        color $color-text-1
      }
    }
    .invoiceHead{
      margin 10px 0
      background #fff
      padding 10px 10px
      .invoiceTypeHead{
        margin-bottom 10px  
      }
      .invoiceHeadDefault{
        border 1px solid #68727d
        border-radius 20px
        font-size $font-size-medium
        color #fff
        width 20px
        height 20px
        line-height 20px
        text-align center 
      }
      .invoiceHeadSelect{
        background #FF9100
        border 1px solid #FF9100
      }
      
    }
    .invoiceTypeNetwork{
      padding 15px 12px
      background #fff
      .invoiceConentDefault{
        border 1px solid #68727d
        padding 2px 10px
        border-radius 2px
        font-size $font-size-medium
      }
      .invoiceConentSelect{
        color #FF9100
        border 1px solid #FF9100
      }
    }
    .invoiceConent{
      background #fff
      margin 10px 0
      padding 0 10px
      .invoicetext{
        padding 10px 0  
        .invoicetextCon{
          font-size $font-size-desc
          color $color-text-2
        }
      }
      .invoiceConentDefault{
        border 1px solid #68727d
        padding 2px 10px
        border-radius 2px
        font-size $font-size-medium
      }
      .invoiceConentSelect{
        color #FF9100
        border 1px solid #FF9100
      }
      .invoiceExplain{
        font-size $font-size-desc 
        color $color-text-2
        padding 10px 0
      }
    }
    .footHeiht{
      height 10px
      width 100%
    }
    .invoicePersonal{
      border-bottom 1px solid $color-border
    }
  }


.buttonContent {
    width 100%
    padding-bottom 10px
    background-color white
    .btnWrapper {
     margin-left 3%
     margin-right 3%
     padding-top 10px
  }
}
  
</style>
